<template>
  <a-dropdown class="w-full h-full flex items-center justify-center">
    <a class="ant-dropdown-link" @click.prevent>
      <SelectOutlined class="mr-2" />
      {{ $t('language.select') }}
    </a>
    <template #overlay>
      <a-menu @click="onClick" style="border-left: 2px solid rgb(24, 144, 255)">
        <a-menu-item :key="key" v-for="(value, key) in LanguageNameMap">{{ $t(value) }}</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { setI18nLanguage, LanguageNameMap, i18n, loadLocaleMessages } from '@/i18n'
import { SelectOutlined } from '@ant-design/icons-vue'

const onClick = async val => {
  await loadLocaleMessages(i18n, val.key)
  setI18nLanguage(i18n, val.key)
}
</script>

<style></style>
